<template>
  <div>
    <!-- 带边框的样式 1-->
    <div class="tabsBoxPc">
      <div class="tabs-1" v-if="type == 1">
        <span
          :class="index == setTab ? 'item-selected' : 'item'"
          v-for="(item, index) in list"
          :key="index"
          @click="toRouter(item)"
          @mouseenter="tabClick(index)"
        >
          <template v-if="index == setTab && item.linkurl">去</template
          >{{ item.name }}
        </span>
      </div>
      <div class="tabs-2" v-if="type == 2">
        <scrollBar direction="x" :activeIndex="tabIndex">
          <div
            :class="index == tabIndex ? 'item-selected' : 'item'"
            v-for="(item, index) in children"
            :key="item.id"
            @click="changeNav(item, index)"
            @mouseenter="changeNav(item, index)"
          >
            <template v-if="index == tabIndex && item.linkurl">去</template>
            {{ item.name }}
            <!-- <div class="line"></div> -->
          </div>
        </scrollBar>
      </div>
    </div>

    <div class="tabsBoxMobile">
      <div class="tabs-1" v-if="type == 1">
        <span
          :class="index == setTab ? 'item-selected' : 'item'"
          v-for="(item, index) in list"
          :key="index"
          @click="tabClick(index, true)"
        >
          {{ item.name }}
        </span>
      </div>
      <div>
        <div class="tabs-2" v-if="type == 2">
          <scrollBar direction="x" :activeIndex="tabIndex">
            <span
              :class="index == tabIndex ? 'item-selected' : 'item'"
              v-for="(item, index) in children"
              :key="index"
              @click="changeNav(item, index)"
            >
              {{ item.name }}
            </span>
          </scrollBar>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import scrollBar from "./slide.vue";
// import scrollSide from "./scrollSide.vue";

export default {
  components: { scrollBar },
  name: "tabs",
  props: {
    type: Number, //根据不同类型显示不同样式
    list: Array,
    style: Object,
    children: Array,
    i: Number,
  },
  watch: {
    i(newData) {
      this.tabIndex = newData;
    },
  },
  data() {
    return {
      setTab: 0,
      tabIndex: 0,
    };
  },

  mounted() {},

  methods: {
    /***
     *跳页
     */
    toRouter(e) {
      if (e.linkurl) {
        window.open(e.linkurl);
      } else {
        this.$router.push({
          name: e.rote,
        });
      }
    },
    changeNav(item, index) {
      console.debug(item);
      this.tabIndex = index;
      this.$emit("change", index);
    },

    /**
     *
     */
    tabClick(index, mobile = false) {
      this.setTab = index;
      this.tabIndex = 0;

      if (mobile) {
        if (this.list[index].linkurl) {
          window.open(this.list[index].linkurl);
        }
      }
      if (!this.list[index].linkurl) {
        this.$emit("change", this.setTab);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .tabsBoxMobile {
    display: none;
  }

  .tabsBoxPc {
    .tabs-1 {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .item {
        cursor: pointer;
        margin: 0 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 18px;
        border-style: solid;
        border-width: 1px;
        border-color: #ee7800;
        width: 123px;
        height: 45px;
        font-size: 26px;
        color: #ee7800;

        &:hover {
          cursor: pointer;
          margin: 0 8px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 18px;
          background: #ee7800;
          width: 123px;
          height: 45px;
          font-size: 26px;
          color: #fff;
        }
      }

      .item-selected {
        cursor: pointer;
        margin: 0 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 18px;
        background: #ee7800;
        width: 123px;
        height: 45px;
        font-size: 26px;
        color: #fff;
      }
    }

    .tabs-2 {
      width: 1200px;
      display: block;

      .item {
        cursor: pointer;
        margin: 0 40px;
        display: inline-block;

        // height: fn.wpx(22);

        font-size: 18px;
        color: #a3a3a3;
        &:hover {
          cursor: pointer;
          margin: 0 40px;
          display: inline-block;

          height: 22px;
          font-size: 18px;
          color: #ee7800;
          padding-bottom: 8px;
          border-bottom-color: color.$base;
          border-bottom-width: 2px;
          border-bottom-style: solid;
        }

        // .line {
        //   display: flex;
        //   height: wpx(3);
        //   width: wpx(40);
        //   background: color.$base;
        // }
      }

      .item-selected {
        cursor: pointer;
        margin: 0 40px;
        display: inline-block;

        height: 22px;
        font-size: 18px;
        color: #ee7800;
        padding-bottom: 8px;
        border-bottom-color: color.$base;
        border-bottom-width: 2px;
        border-bottom-style: solid;
      }
    }
  }
}
</style>


<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .tabsBoxPc {
    display: none;
  }

  .tabsBoxMobile {
    .tabs-1 {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .item {
        cursor: pointer;
        margin: 0 fn.rpx(8);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: fn.rpx(18);
        border-style: solid;
        border-width: 1px;
        border-color: #ee7800;
        width: fn.rpx(122);
        height: fn.rpx(44);
        font-size: fn.rpx(25);
        font-weight: 400;
        color: #ee7800;
      }

      .item-selected {
        cursor: pointer;
        margin: 0 fn.rpx(8);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: fn.rpx(18);
        background: #ee7800;
        width: fn.rpx(122);
        height: fn.rpx(44);
        font-size: fn.rpx(25);
        font-weight: 400;
        color: #fff;
      }
    }

    .tabs-2 {
      width: fn.rpx(750);

      .item {
        cursor: pointer;
        margin: 0 fn.rpx(20);
        display: inline-block;
        height: fn.rpx(22);
        font-size: fn.rpx(18);
        font-weight: bold;
        color: #a3a3a3;
      }

      .item-selected {
        cursor: pointer;
        margin: 0 fn.rpx(40);
        display: inline-block;

        height: fn.rpx(22);
        font-size: fn.rpx(18);
        font-weight: bold;
        color: color.$base;
      }
    }
  }
}
</style>